import React, { Component } from 'react'
import { NavLink } from 'react-router-dom'
// import Homes from './home/Homes'
// import Referrer from './home/Referrer'
// import App from './home/App'
// import My from './home/My'
import RouterView from '../router/RouterView'
import './home.css'

export default class Home extends Component {
    state = {
        FooterList: [
            {
                path: "/home/homes",
                title: "首页"
            },
            {
                path: "/home/referrer",
                title: "推荐"
            },
            {
                path: "/home/app",
                title: "应用"
            },
            {
                path: "/home/my",
                title: "我的"
            }
        ]
    }
    render() {
        const { FooterList } = this.state
        const { children } = this.props
        return (
            <div className="h100 home">
                <header>我是标题</header>
                <main>
                    <RouterView routes = { children }/>

                    {/* <Route path="/home/homes" component = { Homes }/>
                    <Route path="/home/referrer" component = { Referrer }/>
                    <Route path="/home/app" component = { App }/>
                    <Route path="/home/my" component = { My }/> */}
                </main>

                <footer>
                    {
                        FooterList.map((item, index) => {
                            return <NavLink to = { item.path } key = { index }>
                                { item.title }
                            </NavLink>
                        })
                    }
                </footer>
            </div>
        )
    }
}
